<template>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <template v-for="item in data">
        <div class="swiper-slide" :key="item.id">
          <slot name="action" :item="item">
            <img :src="item.pic" alt="" />
          </slot>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
export default {
  data() {
    return {
      myswiper: null,
    };
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  methods: {},
  mounted() {
    this.$nextTick(() => {
      this.myswiper = new Swiper(".swiper-container", {
        slidesPerView: 3,
        spaceBetween: 30,
        observer:true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      });
    });
  },
};
</script>

<style lang="scss" scoped>
img{
  margin-left: 5px;
}
</style>